<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">求人情報</div>
		</header>
		<div class="ditem">
		    <div class="title">職種</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="あなたの職種を選択してください" readonly @click="openPicker('job_type')" v-model="data.job_type" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">就業時間</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="あなたの就業時間を選択してください" readonly @click="openPicker('working_years')" v-model="data.working_years" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">月収入</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="あなたの月収入を入力してください" readonly @click="openPicker('personal')" v-model="data.personal" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">家庭月収入</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="あなたの家庭月収入を入力してください" readonly @click="openPicker('family')" v-model="data.family" />
		    </div>
		</div>
		<div class="topup" @click="sub">設定</div>

		<Picker v-if="picker_loading" v-model:isShowPicker="isShowPicker" v-model:anchor="anchor" :data="picker_data"
			:options="options" @confirm="confirmSelection" />
	</div>
</template>

<script>
	import { Picker } from 'vue3-picker';
	import AJAX from '@/utils/http'
		import { ElMessageBox } from 'element-plus'
	export default {
		components: {
			Picker,
		},

		data() {
			return {
				picker_loading: false,
				isShowPicker: false,
				anchor: 0,
				options: {
					titleText: '選択してください',
					cancelColor: '#999',
					confirmColor: '#1766ff',
					cancelText:"オフ",
					confirmText:"かくにん",
				},
				picker_list:{},
				picker_data: [],
				pickerType: "",
				data: {},
				dataInfo:{},
			};
		},
		mounted() {
			this.picker_loading = true;
		},
		created() {
			this.fetchData();
			AJAX.post('/index/index', {}, {
				showLoading: false
			}).then(e => {
				this.dataInfo = e.data;
			});
		},
		methods: {
			sub(){
				if(this.data.job_type == '' || this.data.job_type == undefined){
					this.$toast('あなたの職種を選択してください');
					return;
				}
				else if(this.data.working_years == '' || this.data.working_years == undefined){
					this.$toast('あなたの就業時間を選択してください');
					return;
				}
				else if(this.data.personal == '' || this.data.personal == undefined){
					this.$toast('あなたの月収入を入力してください');
					return;
				}
				else if(this.data.family == '' || this.data.family == undefined){
					this.$toast('あなたの家庭月収入を入力してください');
					return;
				}
				else {
					AJAX.post('/user/work/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
							
							if (!this.dataInfo.personal) {
								setTimeout(() => {
									this.$router.push('/user/personal');
								}, 1000 * 1.5);
								return;
							}
							if (!this.dataInfo.bank) {
								// this.$toast("銀行カード情報をまだ設定していません");
								setTimeout(() => {
									this.$router.push('/user/bank');
								}, 1000 * 1.5);
																		
							}
							return;
						}
						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/');
						// });
						ElMessageBox.alert(e.msg, 'OK', {
							confirmButtonText: 'OK',
							callback: () => {
								if (!this.dataInfo.personal) {
									setTimeout(() => {
										this.$router.push('/user/personal');
									}, 1000 * 1.5);
									return;
								}
								if (!this.dataInfo.bank) {
									setTimeout(() => {
										this.$router.push('/user/bank');
									}, 1000 * 1.5);
									return;
								}
								if(this.dataInfo.bank&&this.dataInfo.personal){
									 window.location.href='/#/user/index'
								}
							},
						})
					});
				}
			},
			fetchData() {
				AJAX.post('/user/work', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}
					this.picker_list = e.data.picker_list;
				});
			},
			openPicker(type) {
				this.pickerType = type;
				this.picker_data = this.picker_list[type];
				this.isShowPicker = true;
			},
			confirmSelection(value) {
				if (this.isShowPicker && value) {
					this.data[this.pickerType] = value;
					this.isShowPicker = false;
				}
			},
			cancelSelection() {
				this.isShowPicker = false;
			},
		}
	};
</script>

<style scoped>
	.personal{
		padding-left: 16px;
		padding-right: 16px;
	}
</style>
